<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>系统首页</title>
    <script src="http://localhost:8002/jquery-3.6.0.min.js"></script>
</head>

<body>
系统首页index....<br/>
图片先展示 点击图片切换:<br/>
<img src="http://localhost:8002/01.gif" id="myImage" width="200px" onclick="openFile()"><br/>
<input type="file" id="myFile" style="display: none">
</body>

<script>
    function openFile(){
        //触发事件 让上传文本框有一个点击事件
        $("#myFile").trigger("click")
    }

    $(function(){
        //绑定改变事件
        $("#myFile").change(function(){
            var formData = new FormData()
            formData.append("myFile",$("#myFile").prop("files")[0])
            formData.append("userName","张三")
            formData.append("password","123456")

            $.ajax({
                type:'POST',
                url:'/upload',
                data:formData,
                contentType: false,// 注意：让jQuery不要处理数据
                processData: false,// 注意：让jQuery不要设置contentType
                dataType:'json',
                success:function (ret) {
                    $("#myImage").attr("src","http://localhost:8002/"+ret.fileName)
                }
            });

        })
    })

</script>

</html>